<template>
	<view class="page">
		<view class="top">
			<view class="my-login">
				<image :src="userInfo.user_pic" mode="" v-if="userInfo.user_pic"/>
				<image class="logo" src="/static/logo.png" mode="" v-else ></image>
				<view class="yonghu" v-if="userInfo.phoneNum">{{userInfo.phoneNum}}</view>
				<view class="yonghu" @click="login" v-else>点击登录</view>
				<image class="logo1" src="/static/images/shezhi.png" @click="toMySet"></image>
			</view>
		</view>
		<view class="yemian">
			<view class="biankuang">
			<view class="jiedan" @click="toApply">
				<image class="logo2" src="/static/images/jiedan.png"></image>
				<view class="wenzi">申请接单</view>
				<view class="wenzi1">></view>
			</view>
			<view class="wenti">
				问题请点击微信客服复制微信添加好友
			</view>
			<view class="jiedan1" @click="getWXCustomer">
				<image class="logo2" src="/static/images/weixinkefu.png"></image>
				<view class="wenzi">微信客服</view>
				<view class="wenzi1">></view>
			</view>
			<view class="jiedan2" @click="toAboutAs">
				<image class="logo2" src="/static/images/me.png"></image>
				<view class="wenzi">关于我们</view>
				<view class="wenzi1">></view>
			</view>
			<view class="jiedan2" @click="toProposal">
				<image class="logo2" src="/static/images/tousu.png"></image>
				<view class="wenzi">投诉申请</view>
				<view class="wenzi1">></view>
			</view>
			
			</view>
			<view class="bottom">
			<view class="register-btn" @click="loginOut" v-if="userInfo.phoneNum">
				退出登录
			</view>
			<view class="register-btn1" @click="goUpdatePwd">
				修改密码
			</view>
			</view>
		</view>
		
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				userInfo:null
				
			}
		},
		created(){
			//获取存储在storage中的useInfo数据 name token userInfo
			this.userInfo=uni.getStorageSync("userInfo")
			// let obj={
			// 	name:"bb",
			// 	age:18,
			// 	name:"bbb"
			// }
			// let obj1={...obj,name:"bbbb"}
			// //let obj1={name:"bb",age:18,name:"bbb",name:"bbbb"}
			// console.log(obj,obj1,"obj对象");
			
			// let arr=[1,2,3]
			// // let arr1=[...arr]
			
			// let arr1=arr
			// arr[0]=888
			
			// console.log(arr,arr1,"arr数组");
			// //...展开运算符 可以用于数组或者对象的深拷贝
			// //浅拷贝指的是只是复制地址，深拷贝指的是复制值
		},
		methods: {
			goUpdatePwd(){
				uni.navigateTo({
					url:'/pages/updatedPassword/updatedPassword',
				})
			},
			toProposal(){
				uni.navigateTo({
					url:'../proposal/proposal',
				})
			},
			toMySet(){
				uni.navigateTo({
					url:'../mySet/mySet',
				})
			},
			toAboutAs(){
				uni.navigateTo({
					url:'../aboutAs/aboutAs',
				})
			},
			login(){
				uni.removeStorageSync("token");
				uni.removeStorageSync("userInfo");
				uni.navigateTo({
					url:'../login/login',
				})
			},
			loginOut(){
				uni.navigateTo({
					url:'../login/login',
				})
			},
			toApply(){
				uni.navigateTo({
					url:'../apply/apply',
				})
			},
			getWXCustomer(){
				uni.setClipboardData({
					data:'15232202359',
					showToast:true
				})
			},
			
		
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		width:100%;
		height:100vh;
	}
	.my-login{
		display:flex;
		// background-color: red;
		width:100%;
		height:80px;
		background-color: #77DDFF;
	}
	.logo {
		height:40px;
		width: 40px;
		margin-left:12px;
		margin-top: 20px;
		border-radius: 20px;
		
	}
	.logo1{
		width:25px;
		height:25px;
		margin:25px;
		margin-left: 110px;
		// color:black;
		// background-color: red;
	}
	.yonghu{
		font-size: 12px;
		margin-top: 25px;
		margin-left:10px;
		width:100px;
		height:30px;
		padding-top: 5px;
		color:white;
		// background-color: red;
	}
	.yemian{
		background-color: 	#F5F5F5 ;
		width:100%;
		height:100vh;
		position: fixed;
		// top: 0;
	
	}
	.biankuang{
		// display: flex;
		padding: 2px;
		.jiedan{
			margin: 12px auto;
			width:95%;
			height:30px;
			background-color: white;
			padding-top:10px;
			display: flex;
			border-radius: 5px;
		}
		.jiedan1{
			margin: 0 auto 12px;
			width:95%;
			height:30px;
			background-color: white;
			padding-top:10px;
			display: flex;
			border-radius: 5px;
		}
		.jiedan2{
			margin: 3px auto;
			width:95%;
			height:30px;
			background-color: white;
			padding-top:10px;
			display: flex;
			border-radius: 5px;
		}
	}
	
	.logo2{
		width:15px;
		height:15px;
		margin-top: 3px;
		margin-left: 15px;
	}
	.wenzi{
		
		margin-left:5px;
		font-size:14px;
	}
	.wenzi1{
		// margin-left:5px;
		margin-left: 180px;
		// background-color: red;
	}
	.wenti{
		text-align: center;
		font-size: 14px;
		
		margin: 5rpx auto;
		width:95%;
		height:30px;
		background-color: 	#ADD8E6 ;
		border-radius: 5px;
		padding-top:10px;
	}
	
	.register-btn{
		width:80%;
		height:80rpx;
		margin:25% auto 0;
		line-height: 80rpx;
		text-align: center;
		background-color: #FF88C2;
		border-radius: 30rpx;
	}
	.register-btn1{
		width:80%;
		height:80rpx;
		// margin:30% auto 0;
		margin:-25% auto 0;
		line-height: 80rpx;
		text-align: center;
		background-color: #FF88C2;
		border-radius: 30rpx;
	}


</style>
